<template>
    <DialogComponent class="custom-dialog" :layer="dialogParams" @update:visible="closeSceneDialog" @confirm="confirmSceneDialog(ruleFormRef)">
        <div>
            <el-form ref="ruleFormRef" :model="sceneInfo" :rules="rules" :label-width="labelWidth" status-icon class="demo-form-inline">
                <el-form-item label="场景名称" prop="sceneName">
                    <el-input v-model="sceneInfo.sceneName" maxlength="50" placeholder="请输入场景名称" clearable/>
                </el-form-item>
                <el-form-item label="场景code" prop="sceneKey">
                    <el-input v-model="sceneInfo.sceneKey" maxlength="50" placeholder="请输入场景code" :disabled="!!sceneInfo.id" clearable/>
                </el-form-item>
                <el-form-item label="场景描述">
                    <el-input type="textarea" v-model="sceneInfo.comment" maxlength="200" show-word-limit placeholder="请输入场景描述（选填）" />
                </el-form-item>
            </el-form>
        </div>
    </DialogComponent>
</template>
<script>
import { ref, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import DialogComponent from '@/components/dialogComp.vue'
import { deepCopy } from '@/lib/tools.js';
export default {
    components: { DialogComponent },
    props: {
        dialogParams: {
            type: Object,
            default: () => {
                return {}
            },
            required: true
        },
        scene: {
            type: Object,
            default: () => {
                return null
            }
        }
    },
    emits: ['dialog:confirm', 'dialog:close'],
    setup(props, ctx) {
        const store = useStore()
        const ruleFormRef = ref()
        const labelWidth = ref('90px')
        const { scene } = toRefs(props)
        console.log('scene', scene, scene.value)
        const sceneInfo = reactive(scene.value?deepCopy(scene.value):{
            sceneName: '',
            sceneKey: '',
            comment: ''
        })
        const validateSceneKey = (rule, value, callback) => {
            const reg = /[\u4E00-\u9FA5]/g
            if (value&&reg.test(value)) {
                callback(new Error('请输入非中文格式的场景code'))
            } else {
                callback()
            }
        }
        const rules = reactive({
            sceneName: [
                { required: true, message: '请输入场景名称', trigger: 'blur' }
            ],
            sceneKey: [
                {
                    required: true,
                    message: '请输入场景code',
                    trigger: 'change'
                },
                { validator: validateSceneKey, trigger: 'blur' }
            ]
        })
        // 新建场景
        const addScene = () => {
            store.dispatch('proxyAction', {
                name: 'frontAddScene',
                data: {
                    ...sceneInfo
                }
            }).then((res) => {
                store.dispatch('message', {
                    message: '场景创建成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 编辑场景
        const editScene = () => {
            store.dispatch('proxyAction', {
                name: 'frontEditScene',
                data: {
                    ...sceneInfo
                }
            }).then((res) => {
                console.log('res', res)
                store.dispatch('message', {
                    message: '场景编辑成功'
                })
                ctx.emit('dialog:confirm')
            }, (error) => {
                console.log('error', error)
            })
        }
        // 关闭添加账号对话框
        const closeSceneDialog = () => {
            console.log('dialogParams', props.dialogParams.value)
            // props.dialogParams.value.show = false;
            ctx.emit('dialog:close')
        }
        // 账号对话框confirm
        const confirmSceneDialog = (formEl) => {
            formEl.validate((valid, fields) => {
                console.log('valid', valid)
                if (valid) {
                    if (sceneInfo.id) {
                        editScene()
                    } else {
                        addScene()
                    }
                } else {
                    console.log('error submit!', fields)
                }
            })
            // props.dialogParams.value.show = false;
            // ctx.emit('dialog:confirm')
        }
        return {
            ruleFormRef,
            labelWidth,
            sceneInfo,
            rules,
            closeSceneDialog,
            confirmSceneDialog
        };
    }
}
</script>
<style scoped>
.pl12 {
    padding-left: 12px;
}
.c-999 {
    color: #999;
}
</style>